<script setup lang="ts">
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { useRouter, useRoute } from 'vue-router'
import { reactive, ref, unref } from 'vue'
import { useTable } from '@/hooks/web/useTable'
import { getInfoTableListApi, getResultInfoApi } from '@/api/apsMo'
import { Table } from '@/components/Table'
import { ApsMoResult } from '@/api/apsMo/types'

const { push, go } = useRouter()
const { query } = useRoute()
const { t } = useI18n()
const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'selection',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    detail: {
      hidden: true
    },
    table: {
      type: 'selection'
    }
  },
  {
    field: 'index',
    label: t('tableDemo.index'),
    type: 'index',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    detail: {
      hidden: true
    }
  },
  {
    field: 'productCode',
    label: t('apsMoDetail.productCode'),
    search: {
      hidden: true
    }
  },
  {
    field: 'customerName',
    label: t('apsMoDetail.customerName')
  },
  {
    field: 'productTypeName',
    label: t('apsMoDetail.productTypeName'),
    search: {
      hidden: true
    }
  },
  {
    field: 'castType',
    label: t('apsMoDetail.castType'),
    search: {
      hidden: true
    }
  },
  {
    field: 'materialName',
    label: t('apsMoDetail.materialName'),
    search: {
      hidden: true
    }
  },
  {
    field: 'diameter',
    label: t('apsMoDetail.dimension1'),
    search: {
      hidden: true
    },
    formatter: (data) => {
      return data.diameter && data.length ? 'φ' + data.diameter + '*' + data.length : ''
    }
  },
  {
    field: 'workmanshipDiameter',
    label: t('apsMoDetail.dimension2'),
    search: {
      hidden: true
    },
    formatter: (data) => {
      return data.workmanshipDiameter && data.workmanshipLength
        ? 'φ' + data.workmanshipDiameter + '*' + data.workmanshipLength
        : ''
    }
  },
  {
    field: 'weight',
    label: t('apsMoDetail.weight'),
    search: {
      hidden: true
    }
  },
  {
    field: 'weightOut',
    label: t('apsMoDetail.weightOut'),
    search: {
      hidden: true
    }
  },
  {
    field: 'weightIn',
    label: t('apsMoDetail.weightIn'),
    search: {
      hidden: true
    }
  },
  {
    field: 'scheduleCnt',
    label: t('apsMoDetail.scheduleCnt'),
    search: {
      hidden: true
    }
  },
  {
    field: 'useModelList',
    label: t('apsMoDetail.useModelList'),
    search: {
      hidden: true
    }
  }
])
const searchParams = ref({})
const { tableRegister, tableState } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await getInfoTableListApi({
      classType: query.classType as string,
      scheduleDate: query.scheduleDate as string,
      current: unref(currentPage),
      size: unref(pageSize),
      ...unref(searchParams)
    })
    return {
      list: res.data.list,
      total: res.data.total
    }
  }
})
const currentRow = ref<ApsMoResult>({
  scheduleDate: '',
  classTypeGroup: '',
  classTypeStr: '',
  classType: '',
  scheduleCnt: 0,
  weightAll: 0,
  weightOutAll: 0,
  weightInAll: 0,
  castWeight: 0
})
//初始化表头汇总数据
const initInfoData = async () => {
  const res = await getResultInfoApi({
    classType: query.classType as string,
    scheduleDate: query.scheduleDate as string
  })
  currentRow.value = res.data
  console.log(res)
}
initInfoData()
const { allSchemas } = useCrudSchemas(crudSchemas)
const { loading, dataList, total, currentPage, pageSize } = tableState
</script>

<template>
  <ContentDetailWrap :title="t('exampleDemo.detail')" @back="push('/example/example-page')">
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
    </template>
    <div style="margin-bottom: 10px; display: flex; justify-content: space-between; width: 60%">
      <div
        >数量：<span style="font-size: 18px; color: #409eff">{{ currentRow.scheduleCnt }}</span>
        支</div
      >
      <div
        >重量：<span style="font-size: 18px; color: #409eff">{{ currentRow.weightAll || 0 }}</span>
        吨</div
      >
      <div
        >皮重：<span style="font-size: 18px; color: #409eff">{{
          currentRow.weightOutAll || 0
        }}</span>
        吨</div
      >
      <div
        >芯重：<span style="font-size: 18px; color: #409eff">{{
          currentRow.weightInAll || 0
        }}</span>
        吨</div
      >
      <div
        >总重：<span style="font-size: 18px; color: #409eff">{{ currentRow.castWeight || 0 }}</span>
        吨</div
      >
      <div
        >铸造日期：<span style="font-size: 18px; color: #409eff">{{
          currentRow.scheduleDate || 0
        }}</span></div
      >
      <div
        >班次：<span style="font-size: 18px; color: #409eff">{{
          currentRow.classTypeStr || 0
        }}</span></div
      >
    </div>
    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="allSchemas.tableColumns"
      :data="dataList"
      :loading="loading"
      :pagination="{
        total: total
      }"
      @register="tableRegister"
    />
  </ContentDetailWrap>
</template>
